<template>
  <div class="audition93">
    <p>优化原则：</p>
    <p>减少css样式渲染加载时间，减少css代码体积</p>
    <p>具体做法：</p>
    <p>1. 内联首屏关键css</p>
    <p>性能优化中有一个重要的指标叫首次有效绘制</p>
    <p>即页面的首要内容出现在屏幕上的时间</p>
    <p>这一指标影响用户看到页面前所需等待的时间</p>
    <p>但是内联css样式的体积不应该过大，一般压缩后的体积不应该超过14.6kb</p>
    <p>2. 异步加载css</p>
    <p>CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容</p>
    <p>除了首屏关键css外，其他css样式可以使用外联异步加载</p>
    <p>比如，使用js动态创建link标签，并加入到dom中</p>
    <p>或者将link中的media属性设置为一个不匹配的媒体类型，</p>
    <p>如"print"，或者设置一个不存在的类型"noexist",</p>
    <p>对浏览器来说，如果media类型不匹配，则渲染的优先级会被降低，</p>
    <p>会在不阻塞页面渲染的情况下再进行下载</p>
    <p>3. 文件压缩</p>
    <p>使用webpack / gulp / grunt等构建工具，对css代码进行打包压缩，减小css代码体积，去除多余的空格和换行</p>
    <p>4. 去除无用css，使用less等增加样式复用，减小css代码量</p>
  </div>
</template>

<script>
export default {
  name: 'Audition93',
}
</script>

<style>

</style>